<template>
  <div class="add-video-con">
    <p class="margin-left-right-16 margin-bottom-10 margin-top-10">视频地址</p>
    <input-normal label="视频url" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
    <div class="display-video-con margin-left-right-16">
      <div class="btns-con">
        <el-button type="danger" size="small" class="btn-delete" @click.stop="onDelete" >
          <el-icon><i class="jy-icon-delete"></i></el-icon>
        </el-button>
      </div>
      <wb-item-video :item="componentData" :pageId="-1" :popId="-1" :isRight="true"></wb-item-video>
      <div class="mask"></div>
      <p class="info" @click.stop="onShowVideoPop">点击更换</p>
    </div>
    <!-- <input-normal v-model="item.url" label="外部视频链接" @change="onUpdateItem"></input-normal> -->
    <p class="margin-left-right-16 margin-top-10">视频封面</p>
    <add-img-con class="margin-left-right-16" btnLabel="修改封面" :url="commonAttr.poster" comAttr="commonAttr" picAttr="poster" :height="100" :isCrop='false'></add-img-con>
    <input-normal label="封面地址" v-model="commonAttr.poster" @change="onChangeAttr"></input-normal>
  </div>
</template>


<script setup lang="ts">
import WbItemVideo from '@/components/items/wb-item-video.vue'
import { MEDIAS } from '@/const/web/'
import { useWebComponentStore } from '@/store/web/component'
import { useWebMediaStore } from '@/store/web/media'

const useWebMedia = useWebMediaStore()
const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}

const onShowVideoPop = () => {
  const params = { item: MEDIAS.video, type: MEDIAS.video.type, comAttr: 'commonAttr', picAttr: 'url' }
  useWebMedia.setMediaPop(params)
}
const onDelete = () => {
  useWebComponent.updateCurrentComponentData({ commonAttr: { url : '' } })
}
</script>
<style lang="scss" scope>
.add-video-con {
  font-size: 14px;

  .display-video-con {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 268px;
    height: 180px;
    border: 1px dotted #a5afbe;
    font-size: 30px;
    position: relative;
    .mask{
      position: absolute;
      width: inherit;
      height: inherit;
      background-color: rgba(255, 255, 255, 0.01)
    }
    .btns-con{
      position: absolute;
      top: 0;
      right: 0;  
      z-index: 100;
      .btn-delete, .btn-crop{
        margin-left: 1px;
        border-radius: 0;
      }  
    }
  }
  .btn-add-video-con {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 268px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .info{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;

  }

  .video-con{
    width: 270px;
    height: 180px;

    .video-player{
      height: inherit;
    }
  }
}
</style>


